<!--
 * @Descripttion: 新增销售订单
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-17 20:26:23
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-11 20:30:09
 -->
<template>
  <div class="bill_container">
    <affix>
      <div class="clearfix paddingLR20">
        <div class="oper-button btn-group fr">
          <el-button type="default" @click="btnJump2List">历史单据</el-button>
          <el-button type="primary" :loading="btnLoading.save" @click="btnSave">保存(Ctrl+S)</el-button>
        </div>
      </div>
    </affix>
    <el-main>
      <el-form
        ref="billForm"
        :model="dataObj"
        :rules="ruleValidator"
        label-position="left"
        inline
        label-width="80px"
      >
        <el-card shadow="never">
          <div slot="header" class="header clearfix">
            <div class="clearfix index_container form">
              <div class="fl">
                <el-form-item label-width="60px;" label="供应商 ：" prop="comegoId">
                  <SelectComego
                    ref="comego"
                    v-model="dataObj.comegoId"
                    class="w150"
                    comego-name="SupplierList"
                    :default-value="dataObj.comegoName"
                    @change="onComegoChange"
                  />
                </el-form-item>
              </div>
              <div class="fr">
                <el-form-item class="bill-number white-border" label="单据编号: " prop="billNo">
                  <el-input v-model="dataObj.billNo" class="w150" size="mini" />
                </el-form-item>
              </div>
            </div>
            <div class="index_container title">
              <h1> 付款单 </h1>
            </div>
          </div>
          <div class="clearfix">
            <div class="fl">
              <!-- <el-checkbox v-model="dataObj.isPrint" label="保存后打印" border style="margin-right:0" /> -->
            </div>
            <div class="fr">
              <el-form-item style="margin-bottom:0" label-width="80px;" label="经手人 ：" prop="handUserId">
                <SelectEmployee
                  v-model="dataObj.handUserId"
                />
              </el-form-item>
              <el-form-item style="margin-bottom:0" label-width="80px;" label="业务日期 ：" prop="handUserId">
                <el-date-picker v-model="dataObj.businessTime" class="w200" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" />
              </el-form-item>
            </div>
          </div>
          <el-divider />
          <div class="content">
            <el-row>
              <el-col :span="6">
                <el-form-item label="结算账户: " prop="accountId">
                  <SelectAccount
                    v-model="dataObj.accountId"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="应收金额: ">
                  <el-input v-model="dataObj.amountPayable" disabled size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="本次收款: " prop="amountPaid">
                  <el-input v-model="dataObj.amountPaid" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="优惠额度: ">
                  <el-input v-model="dataObj.amountDiscount" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="合计: ">
                  <el-input v-model="dataObj.amountTotal" disabled size="mini" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注: ">
                  <el-input v-model="dataObj.remarks" type="textarea" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-form>
    </el-main>
  </div>
</template>

<script>
import { oftenuse } from '@/libs/mixins'
import { addData } from '@/api/finance/comego-pay-bill.js'
import { add } from './mixins'
import Affix from '@/components/Affix'
import clonedeep from 'clonedeep'
import SelectComego from '@/views/components/SelectComego'
import SelectEmployee from '@/views/components/SelectEmployee'
import SelectAccount from '@/views/components/SelectAccount'
import store from '@/store'
import { getDebtById } from '@/api/bsd/supplier/supplier.js'

export default {
  name: 'ComegoDebtPayAdd',
  components: { SelectEmployee, SelectAccount, SelectComego, Affix },
  filters: {
  },
  mixins: [add, oftenuse],
  props: {
    /**
     * 操作方式：
     * add, update, copyadd
     */
    operation: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      optionsData: { account: [], employee: [] },
      isShowQrcode: false,
      isShowCustomerList: false,
      appData: store.getters.appData,
      ruleValidator: {
        comegoId: [
          { required: true, message: '请选择供应商！', trigger: 'blur' }
        ],
        handUserId: [
          { required: true, message: '请选择经手人！', trigger: 'blur' }
        ],
        accountId: [
          { required: true, message: '请选择结算账户！', trigger: 'blur' }
        ],
        amountPaid: [
          { required: true, message: '请输入本次收款！', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  watch: {
    'dataObj.amountPaid': {
      handler(val) {
        this.handleAmountTotal()
      }
    },
    'dataObj.amountDiscount': {
      handler() {
        this.handleAmountTotal()
      }
    }
  },
  mounted() {
  },
  created() {
    this.initData()
  },
  methods: {
    btnJump2List() {
      this.jump2List(false)
    },
    btnSave({ readd }) {
      this.handleVali().then(_ => {
        const params = clonedeep(this.dataObj)
        this.setBtnLoading('save', true)
        this.saveData(params).then((res) => {
          this.setBtnLoading('save', false)
          if (!res.data.flag) return
          if (readd) {
            this.resetData()
          } else {
            this.jump2List()
          }
        }).catch(err => {
          console.log(err)
          this.setBtnLoading('save', false)
        })
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // api
    jump2List(close = true) {
      if (close) this.closeCurrentTag(this.$route)
      this.$router.push({
        name: 'ComegoDebtPayList'
      })
    },
    handleAmountTotal() {
      const { amountPaid, amountDiscount } = this.dataObj
      const value = this.$amount(amountPaid).add(amountDiscount).format()
      this.$set(this.dataObj, 'amountTotal', value)
    },
    handleVali() {
      const v1 = this.handleValid('billForm')
      return Promise.all([v1])
    },
    initData() {
      this.initSaveData()
    },
    saveData(params) {
      return new Promise((resolve, reject) => {
        addData(params).then(res => {
          resolve(res)
          if (res.data.flag) return this.$notify.success({ title: '保存成功！' })
          this.$notify.error({ title: '保存失败！', message: res.data.message || '' })
        }).catch(err => {
          this.$notify.error({ title: '保存异常！', message: err || '' })
          reject(err)
        })
      })
    },
    getDebtById(id) {
      getDebtById(id).then(res => {
        if (!res.data.flag) return this.$message.error('获取欠供应商款额失败！')
        const data = res.data.data
        this.$set(this.dataObj, 'amountPayable', data)
      })
    },
    /**
     * 重置数据
     */
    resetData() {
      this.initSaveData()
    },
    onComegoChange(data) {
      const { id, name } = data
      this.$set(this.dataObj, 'comegoId', id)
      this.$set(this.dataObj, 'comegoName', name)
      this.getDebtById(id)
    }
  }
}
</script>
<style lang="scss" scoped>
.content{
  /deep/.el-form-item{
    display: block;
    /deep/.el-form-item__label{ float: left;}
    /deep/.el-form-item__content{
    display: block; margin-left:90px;
    }
  }
}
</style>
